<template>
  <div class="announcement-page">
    <el-page-header title="返回" content="发票信息" class="page-header" />
    
    <!-- 筛选器 -->
    <FilterBar 
      :date-range="announcementFilters.dateRange"
      :search="announcementFilters.search"
      @update:date-range="value => announcementFilters.dateRange = value"
      @update:search="value => announcementFilters.search = value"
      @refresh="renderAnnouncementsTable"
      @batch-sync="batchSyncAnnouncements"
      @export="exportAnnouncementData"
    />
    
    <el-card class="data-card">
      <template #header>
        <div class="card-header">
          <span>发票信息列表</span>
          <div class="header-actions">
            <el-tag type="success">总计: {{ announcementPagination.total }} 条</el-tag>
            <el-button type="primary" @click="renderAnnouncementsTable" icon="Refresh">刷新</el-button>
            <el-button type="success" @click="openSaasPortal" icon="Position">在SaaS端查看详情</el-button>
          </div>
        </div>
      </template>
      
      <el-table 
        :data="announcementData" 
        style="width: 100%" 
        v-loading="loading"
        stripe
        border
      >
        <el-table-column prop="date" label="时间" width="180" sortable>
          <template #default="scope">
            <el-icon><Timer /></el-icon>
            <span style="margin-left: 5px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="source" label="来源" width="300" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="primary">{{ scope.row.source }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="preview" label="数据预览" show-overflow-tooltip>
          <template #default="scope">
            <el-popover
              placement="top-start"
              title="详细数据"
              :width="300"
              trigger="hover"
            >
              <pre>{{ formatJson(scope.row.preview) }}</pre>
              <template #reference>
                <div class="preview-text">{{ scope.row.preview }}</div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === '已同步' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" type="primary" @click="syncSingleAnnouncement(scope.row)" icon="RefreshRight">
              同步
            </el-button>
            <el-button size="small" type="danger" @click="deleteAnnouncement(scope.row)" icon="Delete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          @current-change="handleAnnouncementPageChange"
          :current-page="announcementPagination.currentPage"
          :page-size="announcementPagination.pageSize"
          :total="announcementPagination.total"
          layout="total, prev, pager, next, jumper"
          background
        />
      </div>
    </el-card>
    
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>数据说明</span>
        </div>
      </template>
      <div class="info-content">
        <p>发票信息是从税务系统获取的进项发票和销项发票数据，包含发票代码、发票号码、金额、税额等详细信息。</p>
        <p>数据同步状态说明：</p>
        <ul>
          <li><el-tag type="success">已同步</el-tag> - 发票数据已成功上传到服务器并处理完成</li>
          <li><el-tag type="warning">未同步</el-tag> - 发票数据尚未上传或上传失败</li>
        </ul>
        <p>如需查看详细数据或进行对账操作，请点击"SaaS端查看详情"按钮。</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Timer, Position } from '@element-plus/icons-vue'
import FilterBar from '../components/common/FilterBar.vue'
import { useAnnouncementData } from '../composables/useAnnouncementData'

// 使用composable
const {
  announcementData,
  announcementPagination,
  announcementFilters,
  renderAnnouncementsTable,
  handleAnnouncementPageChange,
  syncSingleAnnouncement,
  deleteAnnouncement
} = useAnnouncementData()

const loading = ref(false)

// 导出发票信息
const exportAnnouncementData = () => {
  ElMessageBox.confirm('确定要导出所有发票信息吗？', '导出数据', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    ElMessage.success('发票信息导出成功')
  }).catch(() => {
    ElMessage.info('已取消导出')
  })
}

// 批量同步发票信息
const batchSyncAnnouncements = () => {
  ElMessageBox.confirm('确定要同步所有发票信息吗？', '批量同步', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('发票信息同步完成')
  }).catch(() => {
    ElMessage.info('已取消同步')
  })
}

// 格式化JSON显示
const formatJson = (jsonStr) => {
  try {
    const obj = JSON.parse(jsonStr)
    return JSON.stringify(obj, null, 2)
  } catch (e) {
    return jsonStr
  }
}

// 打开SaaS门户
const openSaasPortal = () => {
  // 在实际应用中，这里应该打开对应的SaaS端页面
  window.open('http://localhost:4000/finance/invoices', '_blank')
}
</script>

<style scoped>
.announcement-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.data-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.info-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.preview-text {
  cursor: pointer;
  color: #409eff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.info-content {
  line-height: 1.6;
}

.info-content ul {
  margin: 10px 0;
  padding-left: 20px;
}

.info-content li {
  margin: 5px 0;
}
</style>